<template>
  <div id="app">
    <div class="top">
      <TopSearch />
    </div>
    <div class="mid clearfix">
      <div class="left"><LeftCharts /></div>
      <div class="right"><BaseInfo ref="base-info" /></div>
    </div>
    <!-- <div class="hr-line"></div> -->
    <div class="bottom">
      <ExcavateList />
    </div>
  </div>
</template>

<script>
import {bus} from "./components/bus"

import TopSearch from './components/TopSearch'
import LeftCharts from './components/LeftCharts'
import BaseInfo from './components/BaseInfo'
import ExcavateList from './components/ExcavateList'

export default {
  name: 'App',
  data() {
    return {
      timer: null
    }
  },
  components: {
    TopSearch,
    LeftCharts,
    BaseInfo,
    ExcavateList
  },
  methods: {
    getPageSize () {
      var self = this;
      var height = document.body.clientHeight;
      var width = document.body.clientWidth;

      var obj = self.$refs['base-info'] || {};
      bus.$emit('getSize', width, height, obj);
    }
  },
  mounted() {
    var self = this;
    self.getPageSize();

    window.addEventListener('resize', function(){
      clearTimeout(self.timer);
      self.timer = setTimeout(function (){
        self.getPageSize();
        bus.$emit('chartReSize');
      }, 500);
    } );

    window.addEventListener('pageshow', function (e) {
      if (e.persisted) {
        self.getPageSize()
      }
    })
  }
}
</script>

<style>
  html, body {
    width: 100%;
    height: 100%;
  }
  .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
</style>

<style scoped>
  #app {
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding-top: 64px;
  }
  .top, .mid, .bottom {
    width: 1200px;
    margin: 0 auto;
  }
  .top {
    margin-bottom: 24px;
  }
  .bottom {
    margin-bottom: 88px;
  }
  .mid {
    margin-bottom: 10px;
    /* border: 1px solid #DDDEE1; */
    border-radius: 4px;
    padding: 15px;
  }
  .hr-line {
    height: 10px;
    background: #f8f8f8;
    margin: 10px 0;
  }
  .mid .left {
    float: left;
    width: 65%;
  }
  .mid .right {
    float: right;
    width: 35%;
  }
</style>
